<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景的绘制区域</title>

        <style type="text/css">
            .wrapper {
                width: 500px ; /* width: 600px ; */
                height: 350px ; /* height: 450px ; */
                padding: 25px ;
                border: 25px solid rgba(0, 0, 255, 0.5);
                margin: 25px auto ;
                background: url("code.webp") no-repeat bottom right ;
                background-size: 50% ;
            }

            .wrapper>div {
                height: 340px ;
                border: 5px solid rgba( 255 , 0 , 0  , 0.5) ;
                font-size: 50px ;
                color: white ;
                text-shadow: 0 0 5px red ;
                text-align: center ;
            }

            .first { background-origin: border-box ; /* 背景图像相对于边框盒来定位 */ }

            .second { background-origin: padding-box ; /* 背景图像相对于内边距框来定位 */ }

            .third { background-origin: content-box ; /* 背景图像相对于内容框来定位 */  }
        </style>

    </head>
    <body>

        <p align="center"> background-origin 属性规定 background-position 属性相对于什么位置来定位 </p>

        <div class="wrapper first">
            <div> border-box </div>
        </div>
        <div class="wrapper second">
            <div> padding-box </div>
        </div>
        <div class="wrapper third">
            <div>content-box</div>
        </div>
        
    </body>
</html>